<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
                                                                                                                        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>on与addEventListener区别</title>

    <style>
        .box {
            width: 200px;
            height: 200px;
            background: red;
        }
        .child{
            width: 100px;
            height: 100px;
            background: green;
            margin: 0 auto;
        }
    </style>
</head>
<body>

<div class="box">
    <div class="child"></div>
</div>

<script>
    window.onload =function () {
        // 1.拿到标签
        var box = document.getElementsByClassName('box')[0];
        var child = box.getElementsByClassName('child')[0];
//        box.onclick = function () {
//            console.log('1th box onClick!!!');
//        }
//
//        // onclick多次添加会被覆盖
//        box.onclick = function () {
//            console.log('2th box onClick!!!');
//        }

        // addEventListener多次添加不会被覆盖
//        box.addEventListener('click', function () {
//            console.log('1th box addEventListener click!!!');
//        })
//
//        box.addEventListener('click', function () {
//            console.log('2th box addEventListener click!!!');
//        })

        // 事件执行 冒泡顺序执行
//        box.addEventListener('click', function () {
//            console.log(' box addEventListener click!!!');
//        }, false);
//
//        child.addEventListener('click', function () {
//            console.log(' child addEventListener click!!!');
//        }, false)

        // 探究事件捕获顺序 -> 从外往内(从爹到儿子)
        box.addEventListener('click', function () {
            console.log('捕获 box addEventListener click!!!');
        }, true);

        child.addEventListener('click', function () {
            console.log('捕获 child addEventListener click!!!');
        }, true);
    }
</script>

</body>
</html>